<template>
<div v-loading="loading">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/Main' }" >首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'FullApproval' }" >转正审批</el-breadcrumb-item>
        <el-breadcrumb-item >转正审批查看</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
    >
    <el-form-item label="部门:" prop="DepartmentId">
      <el-select v-model="ruleForm.DepartmentId" placeholder="请选择部门" style="width: 300px" @change="handePosition" disabled>
        <el-option v-for="item in Department" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="职位:" prop="PositionId">
      <el-select v-model="ruleForm.PositionId" placeholder="请选择职位" style="width: 300px" @change="handestaff" disabled>
        <el-option v-for="item in Position" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="员工姓名:" prop="StaffId">
      <el-select v-model="ruleForm.StaffId" placeholder="请选择员工" style="width: 300px" @change="handePrincipal" disabled>
        <el-option v-for="item in Staff" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="上级负责人:" prop="PrincipalId">
      <el-select v-model="ruleForm.PrincipalId" placeholder="请选择上级负责人" style="width: 300px" @change="handePri" disabled>
        <el-option v-for="item in Principal" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="入职日期:" prop="Hiredate">
      <el-date-picker
        v-model="ruleForm.Hiredate"
        type="date"
        placeholder="请输入入职日期"
        style="width: 300px"
        disabled
      />
    </el-form-item>
    <el-form-item label="申请日期:" prop="ApplicationDate">
      <el-date-picker
        v-model="ruleForm.ApplicationDate"
        type="date"
        placeholder="请输入申请日期"
        style="width: 300px"
        disabled
      />
    </el-form-item>
    <el-form-item label="试用期工作总结:" prop="WorkSummary">
        <el-input
            v-model="ruleForm.WorkSummary"
            style="width: 300px"
            :rows="2"
            type="textarea"
            placeholder="请输入试用期工作总结"
            disabled
        />
    </el-form-item>
    <el-form-item label="对公司的意见和建议:" prop="Opinion">
        <el-input
            v-model="ruleForm.Opinion"
            style="width: 300px"
            :rows="2"
            type="textarea"
            placeholder="请输入对公司的意见和建议"
            disabled
        />
    </el-form-item>
  </el-form>
  <el-table :data="tableData" border style="width: 1000px">
    <el-table-column prop="ApprovalResult" label="审批结果" width="center" />
    <el-table-column prop="ApprovalNotes" label="备注" width="center" />    
    <el-table-column prop="CreatedDate" label="审批时间" width="center" />
    <el-table-column prop="Approver" label="审批人" width="center" />
  </el-table>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { TableInstance } from 'element-plus'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'

const router = useRouter();
const route = useRoute();

const Department = ref([
    { label: '人事部', value: 1 },
    { label: '市场部', value: 2 },
    { label: '财务部', value: 3 },
])

const Positions = ref([
    { label: '部长', value: 1, Parent: 1 },
    { label: '副部长', value: 2, Parent: 2 },
    { label: '经理', value: 3, Parent: 3 },
])

const Position = ref()

const handePosition = (item: any) => {
    ruleForm.value.PositionId = null;
    ruleForm.value.StaffId = null;
    ruleForm.value.PrincipalId = null;
    Position.value = Positions.value.filter(positions => positions.Parent == item);
    const selectedPosition = Department.value.find(position => position.value === item);
    if (selectedPosition) {
        ruleForm.value.Department = selectedPosition.label;
    }    
}

interface stafff {
    value: number,
    label: string
}
const Staff = ref<stafff[]>([])

const handestaff = (item: any) => { 
    ruleForm.value.StaffId = null;
    axios.get("/pread/api/ReadRegister/GetUserFull?PositionId="+item).then(res => {
        Staff.value = res.data.Data
    })
    const selectedPosition = Position.value.find((position:any) => position.value === item);
    if (selectedPosition) {
        ruleForm.value.Position = selectedPosition.label;
    }
}

const Principal = ref()

const handePrincipal = (item: any) => {
    ruleForm.value.PrincipalId = null;
    axios.get("/pread/api/ReadRegister/GetPrincipals", {
        params: {
            DepartmentId: ruleForm.value.DepartmentId,
            StaffId: item
        }
    }).then(res => {
        Principal.value = res.data.Data
    })

    const selectedPosition = Staff.value.find((position:any) => position.value === item);
    if (selectedPosition) {
        ruleForm.value.StaffName = selectedPosition.label;
    }
}

const handePri = (item:any) => {
    const selectedPosition = Principal.value.find((position:any) => position.value === item);
    if (selectedPosition) {
        ruleForm.value.Principal = selectedPosition.label;
    }
}
    
interface RuleForm {
Id:number,
    Guid: string,
    DepartmentId: number | null,
    Department: string,
    PositionId: number | null,
    Position: string,
    StaffId: number | null,
    StaffName: string,
    PrincipalId: number | null,
    Principal: string,
    Hiredate: Date | null,
    Remarks: string|null,
    AppStatusL: string,
    Approver: string,
    CreatedBy: string,
    CreatedDate: Date | null,
    AppRemarks: string | null,
    AppStatus: string,
    LastDay: Date | null,
    ResignationWey: string | null,
    ApplicationDate: string | null,
    WorkSummary: string | null,
    Opinion: string | null,
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    Id: 0,
    Guid: "235345",
    DepartmentId: null,
    Department: "",
    PositionId: null,
    Position: "",
    StaffId: null,
    StaffName: "",
    PrincipalId: null,
    Principal: "",
    Hiredate: null,
    Remarks: null,
    AppStatusL: "",
    Approver: "-",
    CreatedBy: "",
    CreatedDate: new Date,
    AppRemarks: null,
    AppStatus: "",
    LastDay: null,
    ResignationWey: "",
    ApplicationDate:null,
    WorkSummary: null,
    Opinion: null,
})

const resetForm = (formEl: FormInstance | undefined) => {
  router.push("/FullView")
}

const GetTable = () => {
  var id = route.query.id;
  axios.get("/pread/api/ReadFullManage/GetFullManage?id=" + id).then(res => {
    ruleForm.value.Id = res.data.Data.Id
    ruleForm.value.Guid = res.data.Data.Guid
    ruleForm.value.Department = res.data.Data.Department
    ruleForm.value.Position = res.data.Data.Position
    ruleForm.value.StaffName = res.data.Data.StaffName
    ruleForm.value.Principal = res.data.Data.Principal
    ruleForm.value.Hiredate = res.data.Data.Hiredate
    ruleForm.value.Remarks = res.data.Data.Remarks
    ruleForm.value.AppStatusL = res.data.Data.AppStatusL
    ruleForm.value.Approver = res.data.Data.Approver
    ruleForm.value.AppRemarks = res.data.Data.AppRemarks
    ruleForm.value.AppStatus = res.data.Data.AppStatus
    ruleForm.value.LastDay = res.data.Data.LastDay
    ruleForm.value.DepartmentId = res.data.Data.DepartmentId
    ruleForm.value.LastDay = res.data.Data.LastDay
    ruleForm.value.ResignationWey = res.data.Data.ResignationWey
    ruleForm.value.WorkSummary = res.data.Data.WorkSummary
    ruleForm.value.Opinion = res.data.Data.Opinion
    ruleForm.value.ApplicationDate = res.data.Data.ApplicationDate
    handePosition(res.data.Data.DepartmentId)
    ruleForm.value.PositionId = res.data.Data.PositionId
    handestaff(res.data.Data.PositionId)
    ruleForm.value.StaffId = res.data.Data.StaffId
    handePrincipal(res.data.Data.StaffId)
    ruleForm.value.PrincipalId = res.data.Data.PrincipalId
    loading.value = false
    GetApp()
  })
}

const loading = ref(true)

const tableData = ref()
const GetApp = () => {
    var id = ruleForm.value.Id;
    axios.get("/pread/api/Approval/GetApprovalRecordds?Id="+id).then(res => {
        tableData.value = res.data.Data
    })
}

onMounted(() => {
  GetTable();
})
</script>
<style scoped>
</style>